<template>
  <div class="rich_content indexBG">
    <div @tap="kpLists(topic.id)" v-for="topic in topicTabs" :key="index" class="card-list-item">
      <div class="title">{{topic.name}}</div>
      <div class="collect">{{topic.favs}}人最爱</div>
      <div class="image">
        <img class="img" :src="topic.thumb" />
      </div>
    </div>
  </div>
</template>

<script>

import {API} from "../../api";
import {hideLoading, showLoading} from "../../api/wechat";
import {showToast} from "../../utils";

export default {
  data () {
    return {
      topicTabs:[]

    }
  },

  components: {
  },
  mounted() {
    let _this = this;
    _this.getTopics();
  },
  onPullDownRefresh () {
    let _this = this;
    _this.getTopics();
  },

  methods: {
    getTopics(){
      let _this = this;
      showLoading({title:"数据加载中"});
      API.getCategory({cT:2}).then( res => {
        hideLoading();
        wx.stopPullDownRefresh();
        if(res.code == 200){
          _this.topicTabs = res.data;
        } else {
          showToast("暂无更多数据");
        }
      });
    },
    kpLists(catId){
      this.$router.push({ path: '/pages/kplists/main', query: { catId: catId } });
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .indexBG{
    background-color: #f0f0f0;
  }
  .card-list-item{
    background-color: #fff;
    width: 90%;
    margin: 20px auto;
    border-radius: 5px;
    padding: 10px;
  }
  .card-list-item .title{
    font-size: 17px;
    text-align: center;
  }
  .card-list-item .collect{
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 5px 0px 10px 0px;
  }
  .card-list-item .image{
    width: 100%;
    height: 150px;
  }
  .card-list-item .image .img{
    width: 100%;
    height: 100%;
  }

</style>
